<!DOCTYPE html><html lang="[&quot;zh-Hans&quot;,&quot;zh-CN&quot;,&quot;default&quot;]"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="前端知识点串讲-2"><meta name="keywords" content="面试"><meta name="author" content="wenmu"><meta name="copyright" content="wenmu"><title>前端知识点串讲-2 | 温木的博客</title><link rel="shortcut icon" href="/melody-favicon.ico"><link rel="stylesheet" href="/css/index.css?version=1.6.1"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.6.1"><link rel="dns-prefetch" href="https://cdn.staticfile.org"><link rel="dns-prefetch" href="https://cdn.bootcss.com"><link rel="dns-prefetch" href="https://creativecommons.org"><link rel="dns-prefetch" href="http://ta.qq.com"><script>(function() {
   var hm = document.createElement("script");
   hm.src = "https://tajs.qq.com/stats?sId=&lt;script type=&quot;text/javascript&quot; src=&quot;http://tajs.qq.com/stats?sId=66523541&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(hm, s);
 })();</script><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  }
} </script><meta name="generator" content="Hexo 4.2.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#float-的理解"><span class="toc-number">1.</span> <span class="toc-text">float 的理解</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#仍保留流的一部分怎么理解？"><span class="toc-number">1.1.</span> <span class="toc-text">仍保留流的一部分怎么理解？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#实例"><span class="toc-number">1.2.</span> <span class="toc-text">实例</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#CSS-盒模型"><span class="toc-number">2.</span> <span class="toc-text">CSS 盒模型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#基本概念：标准模型-IE-模型"><span class="toc-number">2.1.</span> <span class="toc-text">基本概念：标准模型+IE 模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#标准模型和-IE-模型的区别"><span class="toc-number">2.2.</span> <span class="toc-text">标准模型和 IE 模型的区别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#CSS-如何设置这两种模型"><span class="toc-number">2.3.</span> <span class="toc-text">CSS 如何设置这两种模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-如何设置获取盒模对应的宽和高"><span class="toc-number">2.4.</span> <span class="toc-text">JS 如何设置获取盒模对应的宽和高</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#根据盒模型解释边距重叠"><span class="toc-number">2.5.</span> <span class="toc-text">根据盒模型解释边距重叠</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#BFC-边距重叠解决方案"><span class="toc-number">2.6.</span> <span class="toc-text">BFC(边距重叠解决方案)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#创建-BFC"><span class="toc-number">2.7.</span> <span class="toc-text">创建 BFC</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-事件的级别"><span class="toc-number">2.8.</span> <span class="toc-text">DOM 事件的级别</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-事件模型"><span class="toc-number">2.9.</span> <span class="toc-text">DOM 事件模型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DOM-事件流"><span class="toc-number">2.10.</span> <span class="toc-text">DOM 事件流</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#描述-DOM-事件捕获的具体流程"><span class="toc-number">2.11.</span> <span class="toc-text">描述 DOM 事件捕获的具体流程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#EVent-对象的常见应用"><span class="toc-number">2.12.</span> <span class="toc-text">EVent 对象的常见应用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#自定义事件"><span class="toc-number">2.13.</span> <span class="toc-text">自定义事件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTTP-协议类"><span class="toc-number">3.</span> <span class="toc-text">HTTP 协议类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#主要特点"><span class="toc-number">3.1.</span> <span class="toc-text">主要特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTTP-报文的组成部分"><span class="toc-number">3.2.</span> <span class="toc-text">HTTP 报文的组成部分</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#POST-和-GET-的区别"><span class="toc-number">3.3.</span> <span class="toc-text">POST 和 GET 的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#原型链类问题"><span class="toc-number">4.</span> <span class="toc-text">原型链类问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#创建对象有几种方法"><span class="toc-number">4.1.</span> <span class="toc-text">创建对象有几种方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#原型、构造函数、实例、原型链"><span class="toc-number">4.2.</span> <span class="toc-text">原型、构造函数、实例、原型链</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#手动实现-new-运算法"><span class="toc-number">4.3.</span> <span class="toc-text">手动实现 new 运算法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#继承"><span class="toc-number">5.</span> <span class="toc-text">继承</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#通信类"><span class="toc-number">6.</span> <span class="toc-text">通信类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#什么是同源策略及限制"><span class="toc-number">6.1.</span> <span class="toc-text">什么是同源策略及限制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#前后端如何通信"><span class="toc-number">6.2.</span> <span class="toc-text">前后端如何通信</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#如何创建一个-Ajax"><span class="toc-number">6.3.</span> <span class="toc-text">如何创建一个 Ajax</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#跨域通信的几种方式"><span class="toc-number">6.4.</span> <span class="toc-text">跨域通信的几种方式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安全类"><span class="toc-number">7.</span> <span class="toc-text">安全类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#算法类"><span class="toc-number">8.</span> <span class="toc-text">算法类</span></a></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="https://i.loli.net/2020/02/27/xwaBoOj158MfNyq.jpg"></div><div class="author-info__name text-center">wenmu</div><div class="author-info__description text-center">记录一些在工作中或学习新知识时学到的一些知识点；正所谓好记性不如一个烂笔头，温故而知新！</div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">115</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">52</span></a><a class="author-info-articles__categories article-meta" href="/categories"><span class="pull-left">分类</span><span class="pull-right">30</span></a></div></div></div><div id="content-outer"><div class="no-bg" id="top-container"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">温木的博客</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus"><a class="site-page" href="/">首页</a><a class="site-page" href="/archives">文章</a><a class="site-page" href="/tags">标签</a><a class="site-page" href="/categories">分类</a></span></div><div id="post-info"><div id="post-title">前端知识点串讲-2</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2020-01-09</time><span class="post-meta__separator">|</span><i class="fa fa-inbox post-meta__icon" aria-hidden="true"></i><a class="post-meta__categories" href="/categories/JavaScript/">JavaScript</a></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h2 id="float-的理解"><a href="#float-的理解" class="headerlink" title="float 的理解"></a>float 的理解</h2><ul>
<li>在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。</li>
<li>CSS 属性将一个元素放在其容器的左边或右边，允许文本和内联元素环绕它。元素将从页面的正常流中删除，但仍然保留为流的一部分(与绝对定位相反)。</li>
<li>如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。</li>
<li>假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。</li>
</ul>
<h3 id="仍保留流的一部分怎么理解？"><a href="#仍保留流的一部分怎么理解？" class="headerlink" title="仍保留流的一部分怎么理解？"></a>仍保留流的一部分怎么理解？</h3><p>这里先解释下流的理解。首先流分为三种，标准文档流、文档流、文本流；</p>
<p>标准文档流 = 文档流 + 文本流</p>
<p>其实 float 的元素是从正常流中脱离的，说的是文档流，所以浮动元素会浮在正常流元素上面；仍然保留一部分说的文本流，正常流中的文本或内联元遇到浮动元素会换行。</p>
<h3 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h3><p>把 div3 的填充满内容，然后把 div2 的高度设置成小于 div3 ；可以看到 div2 是压在 div3 上面，这说明 float 元素是脱离文档流的，但是文本在遇到 float 元素时是换行显示的，并没有被 float 元素所遮挡，这就是文本流。</p>
<p><a href="https://www.imooc.com/article/8915" target="_blank" rel="noopener">推荐阅读内容</a></p>
<h2 id="CSS-盒模型"><a href="#CSS-盒模型" class="headerlink" title="CSS 盒模型"></a>CSS 盒模型</h2><h3 id="基本概念：标准模型-IE-模型"><a href="#基本概念：标准模型-IE-模型" class="headerlink" title="基本概念：标准模型+IE 模型"></a>基本概念：标准模型+IE 模型</h3><p>盒子模型就是块的组成部分，<code>margin</code>、<code>border</code>、<code>padding</code>、<code>content</code>。<br><code>标准模型</code>就是宽高只计算<code>content</code>，也就是<code>content-box</code>。<br><code>IE模型</code>就是宽高把<code>border</code>和<code>padding</code>包含进来，注意不包含<code>margin</code>，也就是<code>border-box</code>。</p>
<h3 id="标准模型和-IE-模型的区别"><a href="#标准模型和-IE-模型的区别" class="headerlink" title="标准模型和 IE 模型的区别"></a>标准模型和 IE 模型的区别</h3><p>区别就是上面说的宽高的计算方式不同。</p>
<h3 id="CSS-如何设置这两种模型"><a href="#CSS-如何设置这两种模型" class="headerlink" title="CSS 如何设置这两种模型"></a>CSS 如何设置这两种模型</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">box-sizing:content-box; &#x2F;&#x2F; 标准模型，默认</span><br><span class="line">box-sizing:border-box; &#x2F;&#x2F; IE模型</span><br></pre></td></tr></table></figure>

<h3 id="JS-如何设置获取盒模对应的宽和高"><a href="#JS-如何设置获取盒模对应的宽和高" class="headerlink" title="JS 如何设置获取盒模对应的宽和高"></a>JS 如何设置获取盒模对应的宽和高</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 这个只能获取内联样式的宽和高，也就是通过style属性设置的，不然即使css中设置了高度也获取不到</span><br><span class="line">dom.style.width&#x2F;height</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 这个是获取渲染后的宽和高，但是这个只有IE支持</span><br><span class="line">dom.currentStyle.width&#x2F;height</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 这个和上面一样，但是兼容所有主流浏览器------所以用这个</span><br><span class="line">window.getComputedStyle(dom).width&#x2F;height</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; 这个也能获取渲染后的宽高，但是这个主要用于计算位置，因为返回值里面有位置和宽高信息</span><br><span class="line">dom.getBoundingClientRect().width&#x2F;height</span><br></pre></td></tr></table></figure>

<h3 id="根据盒模型解释边距重叠"><a href="#根据盒模型解释边距重叠" class="headerlink" title="根据盒模型解释边距重叠"></a>根据盒模型解释边距重叠</h3><h3 id="BFC-边距重叠解决方案"><a href="#BFC-边距重叠解决方案" class="headerlink" title="BFC(边距重叠解决方案)"></a>BFC(边距重叠解决方案)</h3><ol>
<li>BFC 的概念<br>BFC 就是块级格式化上下文。</li>
<li>BFC 的原理<br>原理说白了就是渲染规则，规则是：<blockquote>
<ol>
<li>BFC 这个元素的垂直方向的边距会发生重叠</li>
<li>BFC 的区域不会与浮动元素的 box 重叠，这用来清除浮动和布局<br>我们知道 float 的元素是覆盖在其他元素上面，比如 A，只是文本会受浮动元素影响，但是当把 A 设置成 BFC(overflow:hidden)，float 元素就不会在 A 元素上面了。</li>
</ol>
</blockquote>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">  &lt;style&gt;</span><br><span class="line">    html * &#123;</span><br><span class="line">      padding: 0;</span><br><span class="line">      margin: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    .parent &#123;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line">    .child &#123;</span><br><span class="line">      margin-top: 10px;</span><br><span class="line">      background-color: yellow;</span><br><span class="line">      height: 100px;</span><br><span class="line">      &#x2F;* overflow: hidden; *&#x2F;</span><br><span class="line">    &#125;</span><br><span class="line">    .float &#123;</span><br><span class="line">      float: left;</span><br><span class="line">      height: 50px;</span><br><span class="line">      width: 200px;</span><br><span class="line">      background-color: blue;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;&#x2F;style&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;section class&#x3D;&quot;parent&quot; id&#x3D;&quot;parent&quot;&gt;</span><br><span class="line">    &lt;div class&#x3D;&quot;float&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;article class&#x3D;&quot;child&quot;&gt;&lt;&#x2F;article&gt;</span><br><span class="line">  &lt;&#x2F;section&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<ol start="3">
<li>BFC 在页面上是个独立的容器，外面的元素不会影响里面的元素，里面的也不会影响外面的</li>
<li>计算 BFC 高度时，浮动元素也会参与计算<br>正常情况下，容器中有浮动元素，容器的高度是不受浮动元素影响，即使浮动元素独自占一行。但是如果容器设置成 BFC，高度就受浮动元素的影响了</li>
</ol>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">  &lt;style&gt;</span><br><span class="line">    html * &#123;</span><br><span class="line">      padding: 0;</span><br><span class="line">      margin: 0;</span><br><span class="line">    &#125;</span><br><span class="line">    .parent &#123;</span><br><span class="line">      background-color: red;</span><br><span class="line">    &#125;</span><br><span class="line">    .child &#123;</span><br><span class="line">      margin-top: 10px;</span><br><span class="line">      background-color: yellow;</span><br><span class="line">      height: 100px;</span><br><span class="line">    &#125;</span><br><span class="line">    .float &#123;</span><br><span class="line">      float: left;</span><br><span class="line">      height: 50px;</span><br><span class="line">      width: 200px;</span><br><span class="line">      background-color: blue;</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;&#x2F;style&gt;</span><br><span class="line"></span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;section class&#x3D;&quot;parent&quot; id&#x3D;&quot;parent&quot;&gt;</span><br><span class="line">    &lt;article class&#x3D;&quot;child&quot;&gt;&lt;&#x2F;article&gt;</span><br><span class="line">    &lt;div class&#x3D;&quot;float&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;&#x2F;section&gt;</span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">    window.onload &#x3D; function() &#123;</span><br><span class="line">      console.log(window.getComputedStyle(document.getElementById(&quot;parent&quot;)).height);</span><br><span class="line">    &#125;;</span><br><span class="line">  &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br></pre></td></tr></table></figure>

<h3 id="创建-BFC"><a href="#创建-BFC" class="headerlink" title="创建 BFC"></a>创建 BFC</h3><ul>
<li>根元素(<code>&lt;html&gt;</code>)</li>
<li>浮动元素（元素的  <code>float</code>  不是  <code>none</code>）</li>
<li>绝对定位元素（元素的  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position" target="_blank" rel="noopener" title="CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。"><code>position</code></a>  为  <code>absolute</code>  或  <code>fixed</code>）</li>
<li>行内块元素（元素的  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" rel="noopener" title="display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。"><code>display</code></a>  为  <code>inline-block</code>）</li>
<li>表格单元格（元素的  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" rel="noopener" title="display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。"><code>display</code></a>为  <code>table-cell</code>，HTML 表格单元格默认为该值）</li>
<li>表格标题（元素的  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" rel="noopener" title="display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。"><code>display</code></a>  为  <code>table-caption</code>，HTML 表格标题默认为该值）</li>
<li>匿名表格单元格元素（元素的  <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" rel="noopener" title="display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。"><code>display</code></a>为  <code>table、``table-row</code>、 <code>table-row-group、``table-header-group、``table-footer-group</code>（分别是 HTML table、row、tbody、thead、tfoot 的默认属性）或  <code>inline-table</code>）</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow" target="_blank" rel="noopener" title="CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 "><code>overflow</code></a>  值不为  <code>visible</code>  的块元素</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/display" target="_blank" rel="noopener" title="display CSS 属性指定了元素的显示类型，它包含两类基础特征，用于指定元素怎样生成盒模型——外部显示类型定义了元素怎样参与流式布局的处理，内部显示类型定义了元素内子元素的布局方式。"><code>display</code></a>  值为  <a href="https://drafts.csswg.org/css-display/#valdef-display-flow-root" target="_blank" rel="noopener"><code>flow-root</code></a>  的元素</li>
</ul>
<p><a href="https://www.cnblogs.com/mlw1814011067/p/10397999.html" target="_blank" rel="noopener">一篇不错的 BFC 的讲解，貌似和我听的一套课程</a></p>
<p>##DOM 事件类</p>
<h3 id="DOM-事件的级别"><a href="#DOM-事件的级别" class="headerlink" title="DOM 事件的级别"></a>DOM 事件的级别</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">DOM0 element.onclick&#x3D;function()&#123;&#125; || &lt;div onclick&#x3D;&quot;clickme()&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line"></span><br><span class="line">DOM2 element.addEventListener(&#39;click&#39;,function()&#123;&#125;,false)</span><br><span class="line"></span><br><span class="line">DOM3 element.addEventListener(&#39;keyup&#39;,function()&#123;&#125;,false)</span><br></pre></td></tr></table></figure>

<p>与其说是级别，不如说是版本。<br>DOM0 就是上面两种添加事件的时代。<br>DOM1 没有制定事件相关的内容<br>DOM2 就是增加了使用<code>addEventListener</code>添加事件的方式<br>DOM3 增加了很多的事件类型，比如鼠标事件、键盘事件等等</p>
<h3 id="DOM-事件模型"><a href="#DOM-事件模型" class="headerlink" title="DOM 事件模型"></a>DOM 事件模型</h3><p>说的就是冒泡和捕获</p>
<h3 id="DOM-事件流"><a href="#DOM-事件流" class="headerlink" title="DOM 事件流"></a>DOM 事件流</h3><p>事件流分为三个阶段：<br>捕获阶段—目标阶段—冒泡阶段</p>
<h3 id="描述-DOM-事件捕获的具体流程"><a href="#描述-DOM-事件捕获的具体流程" class="headerlink" title="描述 DOM 事件捕获的具体流程"></a>描述 DOM 事件捕获的具体流程</h3><p>window–document—html—body—继续向下到目标</p>
<blockquote>
<p>注意第一个对象是 window，不是 html</p>
</blockquote>
<h3 id="EVent-对象的常见应用"><a href="#EVent-对象的常见应用" class="headerlink" title="EVent 对象的常见应用"></a>EVent 对象的常见应用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">event.preventDefault()</span><br><span class="line">event.stopPropagation()</span><br><span class="line">event.stopImmediatePropagation()</span><br><span class="line">event.currentTarget &#x2F;&#x2F; 绑定事件的元素</span><br><span class="line">event.target &#x2F;&#x2F; 触发事件的元素</span><br></pre></td></tr></table></figure>

<p>前两个没啥可说的，直接说第三个；<br>比如给按钮绑定了两个事件<code>eventA</code>和<code>eventB</code>,正常情况下，点击按钮后，<code>eventA</code>和<code>eventB</code>都会被执行；<br>如果想执行<code>eventA</code>后不再执行<code>eventB</code>，在 eventA 中调用<code>event.stopImmediatePropagation()</code>就行了。<br>event.target 比较好理解，表示触发事件的元素。<br>event.currentTarget 表示绑定事件的元素；比如把事件绑定在父元素<code>ul</code>上，点击子元素<code>li</code>时，<code>e.target</code>是<code>li</code>，但是<code>e.currentTarget</code>是<code>ul</code></p>
<h3 id="自定义事件"><a href="#自定义事件" class="headerlink" title="自定义事件"></a>自定义事件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 定义事件</span><br><span class="line">let eve&#x3D;new Event(&#39;eventName&#39;)</span><br><span class="line">&#x2F;&#x2F; 绑定事件</span><br><span class="line">dom.addEventListener(&#39;eventName&#39;,function()&#123;&#125;)</span><br><span class="line">&#x2F;&#x2F; 触发事件</span><br><span class="line">dom.dispatchEvent(eve)</span><br></pre></td></tr></table></figure>

<p>如果定义事件时需要传递一些参数，可以使用<code>CustomEvent</code></p>
<h2 id="HTTP-协议类"><a href="#HTTP-协议类" class="headerlink" title="HTTP 协议类"></a>HTTP 协议类</h2><h3 id="主要特点"><a href="#主要特点" class="headerlink" title="主要特点"></a>主要特点</h3><ul>
<li>简单快速</li>
<li>灵活</li>
<li>无连接</li>
<li>无状态</li>
</ul>
<h3 id="HTTP-报文的组成部分"><a href="#HTTP-报文的组成部分" class="headerlink" title="HTTP 报文的组成部分"></a>HTTP 报文的组成部分</h3><p><strong>请求报文</strong></p>
<ul>
<li>请求行</li>
<li>请求头</li>
<li>空行</li>
<li>请求体</li>
</ul>
<p><strong>响应报文</strong></p>
<ul>
<li>状态行</li>
<li>响应行</li>
<li>空行</li>
<li>响应体</li>
</ul>
<h3 id="POST-和-GET-的区别"><a href="#POST-和-GET-的区别" class="headerlink" title="POST 和 GET 的区别"></a>POST 和 GET 的区别</h3><ol>
<li>GET 在浏览器回退时是无害的，而 POST 会再次提交请求 √</li>
<li>GET 产生的 URL 地址可以被收藏，而 POST 不可用</li>
<li>GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设置 √</li>
<li>GET 请求只能进行 url 编码，而 POST 支持多种编码方式</li>
<li>GET 请求参数会被完整的保留在浏览器的历史记录里，而 POST 中的参数不会被保留 √</li>
<li>GET 请求在 URL 中传送的参数是有长度限制的，而 POST 没有限制 √</li>
<li>对参数的数据类型，GET 只接受 ASCII 字符，而 POST 没有限制 √</li>
<li>GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息</li>
<li>GET 参数通过 URL 传递，POST 放在 Request body 中</li>
</ol>
<h2 id="原型链类问题"><a href="#原型链类问题" class="headerlink" title="原型链类问题"></a>原型链类问题</h2><h3 id="创建对象有几种方法"><a href="#创建对象有几种方法" class="headerlink" title="创建对象有几种方法"></a>创建对象有几种方法</h3><p>总共三种</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> o1 = &#123; <span class="attr">name</span>:<span class="string">'zhangsan'</span> &#125; <span class="comment">// 字面量的方式</span></span><br><span class="line"><span class="keyword">let</span> <span class="number">02</span> = <span class="keyword">new</span> <span class="built_in">Object</span>(&#123;<span class="attr">name</span>:<span class="string">'zhagnsan'</span>&#125;)</span><br></pre></td></tr></table></figure>

<p>上面的两种写法是一种声明方式。</p>
<p>第二种：构造函数的方式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Man = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> zhangsan = <span class="keyword">new</span> Man();</span><br></pre></td></tr></table></figure>

<p>第三种：Object.create()方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> o1 = &#123; <span class="attr">name</span>: <span class="string">"zhangsan"</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> o2 = <span class="built_in">Object</span>.create(<span class="number">01</span>);</span><br></pre></td></tr></table></figure>

<p><img src="https://i.loli.net/2020/02/26/JXpGoPyiIOwQk5j.png" alt="1348523-c516f36ecb8241e3.png"></p>
<h3 id="原型、构造函数、实例、原型链"><a href="#原型、构造函数、实例、原型链" class="headerlink" title="原型、构造函数、实例、原型链"></a>原型、构造函数、实例、原型链</h3><p>只要使用 new 创建实例，那这个函数这时就是构造函数，不使用 new 操作它，它就是普通的函数，所以任何函数都可以是构造函数。</p>
<blockquote>
<p>使用实例原型链上的 constructor 和 function 进行对比，来判断实例是哪个 function 的实例。</p>
</blockquote>
<h3 id="手动实现-new-运算法"><a href="#手动实现-new-运算法" class="headerlink" title="手动实现 new 运算法"></a>手动实现 new 运算法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> Fun = <span class="function"><span class="keyword">function</span>(<span class="params">func</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 首先创建一个空对象，并把它的原型指到func上</span></span><br><span class="line">  <span class="keyword">let</span> o = <span class="built_in">Object</span>.create(func.prototype);</span><br><span class="line">  <span class="comment">// 执行原函数</span></span><br><span class="line">  <span class="keyword">let</span> r = func.call(o);</span><br><span class="line">  <span class="comment">// 判断原函数是否有返回值，有返回值则返回，没有则返回上面创造的对象</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> r === <span class="string">"object"</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> r;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> o;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Parent</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">this</span>.name = <span class="string">"zhangsan"</span>;</span><br><span class="line">  <span class="keyword">this</span>.list = [];</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Child</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  Parent.call(<span class="keyword">this</span>);</span><br><span class="line">  <span class="keyword">this</span>.age = <span class="number">18</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 第一种方式</span></span><br><span class="line">Child.prototype = <span class="keyword">new</span> Parent();</span><br><span class="line"><span class="comment">// 第二种方式</span></span><br><span class="line">Child.prototype = Parent.prototype;</span><br><span class="line"><span class="comment">// 第三种方式</span></span><br><span class="line">Child.prototype = <span class="built_in">Object</span>.create(Parent.prototype);</span><br><span class="line">Child.prototype.contructor = Child;</span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="comment">// Child.prototype.__proto__=Parent.prototype;</span></span><br></pre></td></tr></table></figure>

<h2 id="通信类"><a href="#通信类" class="headerlink" title="通信类"></a>通信类</h2><h3 id="什么是同源策略及限制"><a href="#什么是同源策略及限制" class="headerlink" title="什么是同源策略及限制"></a>什么是同源策略及限制</h3><p>同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。<br>这是一个用于隔离潜在恶意文件的关键的安全机制。</p>
<p>源=协议+域名+端口</p>
<ul>
<li>Cookie、LocalStorage 和 IndexDB 无法读取</li>
<li>DOM 无法获得</li>
<li>AJAX 请求不能发送</li>
</ul>
<h3 id="前后端如何通信"><a href="#前后端如何通信" class="headerlink" title="前后端如何通信"></a>前后端如何通信</h3><ul>
<li>Ajax</li>
<li>WebSocket 不受同源策略限制</li>
<li>CORS 支持跨域通信也支持同源通信<br>这是一个新的企业通信标准</li>
</ul>
<h3 id="如何创建一个-Ajax"><a href="#如何创建一个-Ajax" class="headerlink" title="如何创建一个 Ajax"></a>如何创建一个 Ajax</h3><ul>
<li>XMLHttpRequest 对象的工作流程</li>
<li>兼容性处理</li>
<li>事件的触发条件</li>
<li>事件的触发顺序</li>
</ul>
<h3 id="跨域通信的几种方式"><a href="#跨域通信的几种方式" class="headerlink" title="跨域通信的几种方式"></a>跨域通信的几种方式</h3><ul>
<li>jSONP<br>使用 script 标签的 src 属性实现</li>
<li>Hash<br>就是 url 中#号后面的内容，hash 的改变是不刷新页面的，query 是的改变会刷新(?后面的)，所以 query 不能做<br>跨域通信</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 场景是当前页面 A 通过 iframe或frame嵌入了跨域的页面 B</span></span><br><span class="line"><span class="comment">// 在 A 中的伪代码如下：</span></span><br><span class="line"><span class="keyword">let</span> B = <span class="built_in">document</span>.getElementByTagName(<span class="string">"iframe"</span>);</span><br><span class="line">B[<span class="number">0</span>].src = B[<span class="number">0</span>].src + <span class="string">"#"</span> + <span class="string">"data"</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 在 B 中的伪代码如下</span></span><br><span class="line"><span class="built_in">window</span>.onhashchange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> data = <span class="built_in">window</span>.location.hash;</span><br><span class="line">  <span class="comment">// 然后再用data发出请求</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>我想了想为什么 query 不行，按说上面的方式也能改变 url 的参数，并且在 B 页面是可以获取到的。但是为什么不能做跨域呢？<br>上面也说了这种方式不能是因为会引起刷新，问题是为什么引起刷新就不能做跨域了？<br>原因为刷新导致了其他服务端请求，这些请求被认为是 A 发出的，但是经过测试发现，<code>iframe</code>中发出的请求<code>origin</code>和<code>referer</code>都是 B 自己。那应该也可以啊？？？</p>
<ul>
<li>postMessage HTML5</li>
<li>WebSocket</li>
<li>CORS<br>为什么 cors 能跨域？<br>当浏览器发现发出的请求是 CORS，会在请求头里面加上 origin 参数。</li>
</ul>
<h2 id="安全类"><a href="#安全类" class="headerlink" title="安全类"></a>安全类</h2><p>主要就是 XSS 和 CSRF<br><a href="https://segmentfault.com/n/1330000017762196?token=3c334f35a69008d4e1607e3530f1612f" target="_blank" rel="noopener">https://segmentfault.com/n/1330000017762196?token=3c334f35a69008d4e1607e3530f1612f</a></p>
<h2 id="算法类"><a href="#算法类" class="headerlink" title="算法类"></a>算法类</h2><ul>
<li><p>排序<br><img src="https://i.loli.net/2020/02/26/v1NYejftgZaC9Ey.png" alt="各种排序算法的复杂度"></p>
</li>
<li><p>堆栈、队列、链表</p>
</li>
<li><p>递归</p>
</li>
<li><p>波兰式和逆波兰式</p>
</li>
</ul>
<p><a href="https://segmentfault.com/a/1190000009426421" target="_blank" rel="noopener">Javascript 算法——快速排序</a></p>
<p><a href="https://segmentfault.com/a/1190000009366805" target="_blank" rel="noopener">Javascript 算法——选择排序</a></p>
<p><a href="https://segmentfault.com/a/1190000009461832" target="_blank" rel="noopener">Javascript 算法——希尔排序</a></p>
<p><a href="https://segmentfault.com/a/1190000009857470" target="_blank" rel="noopener">JavaScript 中的递归</a></p>
<p><a href="https://www.cnblogs.com/chenying99/p/3675876.html" target="_blank" rel="noopener">波兰式、逆波兰式与表达式求值</a></p>
<p><a href="https://github.com/Tairraos/rpn.js/blob/master/rpn.js" target="_blank" rel="noopener">https://github.com/Tairraos/rpn.js/blob/master/rpn.js</a></p>
</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">wenmu</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.wangpengpeng.site/2020/01/09/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E4%B8%B2%E8%AE%B2-2/">http://blog.wangpengpeng.site/2020/01/09/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E4%B8%B2%E8%AE%B2-2/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="noopener">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.wangpengpeng.site">温木的博客</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E9%9D%A2%E8%AF%95/">面试</a></div><div class="post-qr-code"><div class="post-qr-code-item"><img class="post-qr-code__img" src="https://i.loli.net/2020/02/27/hOBzIxFDJMCrmtN.jpg"><div class="post-qr-code__desc">微信打赏</div></div></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2020/01/09/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9%E4%B8%B2%E8%AE%B2-1/"><i class="fa fa-chevron-left">  </i><span>前端知识点串讲-1</span></a></div><div class="next-post pull-right"><a href="/2020/01/09/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/"><span>智能合约开发笔记</span><i class="fa fa-chevron-right"></i></a></div></nav><div id="vcomment"></div><script src="https://cdn1.lncld.net/static/js/3.0.4/av-min.js"></script><script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script><script>var notify = 'false' == true ? true : false;
var verify = 'false' == true ? true : false;
var GUEST_INFO = ['nick','mail','link'];
var guest_info = 'nick,mail,link'.split(',').filter(function(item){
  return GUEST_INFO.indexOf(item) > -1
});
guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
window.valine = new Valine({
  el:'#vcomment',
  notify:notify,
  verify:verify,
  appId:'U1QqpeQNuBnRsfygHk1GQ30q-gzGzoHsz',
  appKey:'dunDQzEseDzgsKgw4qLQcog1',
  placeholder:'支持markdown！',
  avatar:'wavatar',
  guest_info:guest_info,
  pageSize:'20',
  lang: 'zh-cn'
})</script></div></div><footer><div class="layout" id="footer"><div class="copyright">&copy;2019 - 2020 By wenmu</div><div class="framework-info"><span>驱动 - </span><a href="http://hexo.io" target="_blank" rel="noopener"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a href="https://github.com/Molunerfinn/hexo-theme-melody" target="_blank" rel="noopener"><span>Melody</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv">该文访问量<span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.6.1"></script><script src="/js/fancybox.js?version=1.6.1"></script><script src="/js/sidebar.js?version=1.6.1"></script><script src="/js/copy.js?version=1.6.1"></script><script src="/js/fireworks.js?version=1.6.1"></script><script src="/js/transition.js?version=1.6.1"></script><script src="/js/scroll.js?version=1.6.1"></script><script src="/js/head.js?version=1.6.1"></script><script>if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
}</script></body></html>